<!-- 新契约工作列表--机器人核保工作任务页面 -->
<template>
	<div class="fillcontain">
		<!-- 查询条件 -->
		<div class="fastQuery">
			<el-row>
				<el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
				<el-col :span="4" class="moreCondition">
					<span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
					<span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
				</el-col>
				<el-col :span="8"></el-col>
			</el-row>
		</div>
		<!-- 查询表单 -->
		<el-form v-show="isShow" :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px"
			class="search_container">
			<el-row>
				<el-col :span="6" class="common-box">
					<el-form-item label="保单类型" prop="policyType">
						<el-select v-model="searchParams.policyType" placeholder="保单类型" clearable>
							<el-option v-for="item in policyTypeOptions" :key="item.id" :label="item.dictValue" :value="item.dictValue">
								</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="受理号" prop="accepted">
						<el-input clearable v-model="searchParams.accepted" placeholder="受理号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="保单号" prop="policy">
						<el-input clearable v-model="searchParams.policy" placeholder="保单号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="投保人" prop="appntName">
						<el-input clearable v-model="searchParams.appntName" placeholder="投保人"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="被保险人" prop="insuredName">
						<el-input clearable v-model="searchParams.insuredName" placeholder="被保人"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="任务级别" prop="taskLevel">
						<el-select clearable v-model="searchParams.taskLevel" placeholder="任务级别">
							<el-option v-for="item in taskLevels" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="6">
					<el-form-item label="任务类型" prop="routeid">
						<el-select clearable v-model="searchParams.routeid" placeholder="任务类型">
							<el-option v-for="item in routeids" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
				<!--  第二被保人需求  end      -->
				<el-col :span="6" class="text_center">
					<el-button type="primary" icon="el-icon-search" @click="queryData"></el-button>
					<el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
				</el-col>
			</el-row>

		</el-form>
		<div class="result-contain">
			<!-- 操作按钮 -->
			<el-row  class="pb10">
				<el-col :span="24">
					<el-button type="danger" plain @click="forceEnd">
						<i class="el-icon-circle-close"></i>
						<span>强制结束</span>
					</el-button>
				</el-col>
			</el-row>
			<!-- 查询列表 -->
			<div class="table_container">
				<el-table ref="multipleDataTable" :data="tableData" highlight-current-row
					header-cell-class-name="table-header-class" style="width:100%"
					@row-click="selectSingleTableData">
					<!-- 选框 -->
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="policyType" label="保单类型" align='center' show-overflow-tooltip min-width="80">
					</el-table-column>
					<el-table-column prop="orgName" label="机构" align='center' show-overflow-tooltip min-width="120">
						<template slot-scope="scope">
							<span>{{ scope.row.orgName | formatSsyMap(ssyMap) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="channel" label="渠道" show-overflow-tooltip min-width="50" align='center'>
					</el-table-column>
					<el-table-column prop="accepted" label="受理号" show-overflow-tooltip min-width="80" align='center'>
					</el-table-column>
					<el-table-column prop="policy" label="保单号" show-overflow-tooltip align='center' min-width="100">
					</el-table-column>
					<el-table-column prop="appntName" label="投保人" show-overflow-tooltip align='center' min-width="100">
					</el-table-column>
					<el-table-column prop="insuredName" label="被保险人" show-overflow-tooltip align='center' min-width="100">
					</el-table-column>
					<el-table-column prop="contractName" label="主合同名称" show-overflow-tooltip align='center' min-width="180">
					</el-table-column>
					<el-table-column prop="taskLevel" label="任务级别" show-overflow-tooltip align='center' min-width="100">
					</el-table-column>
					<el-table-column prop="taskStatus" label="任务类型" show-overflow-tooltip align='center' min-width="100">
						<template slot-scope="scope">
							<span>{{ scope.row.taskStatus | formatDict(taskStatusOptions) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="updateTime" label="最近处理时间" show-overflow-tooltip align='center' min-width="160">
					</el-table-column>

					<el-table-column fixed="right" prop="taskFlow" label="任务流转" show-overflow-tooltip align='center' min-width="100">
						<template slot-scope="scope">
							<el-link type="primary" @click="showChange(scope.row.taskNo)">任务流转</el-link>
						</template>
					</el-table-column>

					<el-table-column fixed="right" prop="imageInfo" label="影像信息" show-overflow-tooltip align='center' min-width="80">
						<template slot-scope="scope">
							<span class="operationIcon" @click="showImageList(scope.row.accepted)">
								<i class="el-icon-camera"></i>
							</span>
						</template>

					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-row>
					<el-col :span="24">
						<div class="pagination">
							<el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes"
								:page-size="paginations.pageSize" :layout="paginations.layout"
								:total="paginations.total" :current-page='paginations.pageIndex'
								@current-change='handleCurrentChange' @size-change='handleSizeChange'>
							</el-pagination>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>

		<!-- 任务流转组件 -->
		<task-change-list :business="'NB'" :taskNo="changeTaskNo" :drawer="showChangeFlag" @close="hideChange">
		</task-change-list>
		<!--影像列表-->
		<!-- <cdfs-image-list ref="cdfsImage" :drawer="showImageFlag" :applnum="showImageApplnum" @close="hideImageList" :isFromEnterWork="true" @queryImage="queryImage"></cdfs-image-list> -->
		<cdfs-image-list ref="cdfsImage" :drawer="showImageFlag" :applnum="showImageApplnum" @close="hideImageList"></cdfs-image-list>
	</div>
</template>

<script>
	import {
		selectAiTask,
		selectTaskImage,
		closeAIProcess
	} from "@/api/taskCenter/robotUnderwritingTaks.js"
	import {
		getCodeDictProject,
	} from "@/api/taskCenter/enterWorkPool";

	import {
    getSsyOrgMap,
  } from "@/api/taskCenter/taskCommon";

	import constant from '@/utils/constant';
	import mixins from '@/utils/mixins'

	import TaskChangeList from "../taskChangeList";  //引入任务流转组件
	import CdfsImageList from "@/page/common/cdfsImageList";    //引入影像信息组件

	export default {
		mixins: [mixins],
		components: {
			CdfsImageList,  //影像组件
			TaskChangeList,  //任务流转组件
		},
		data() {
				return {
					tableDataEdit: {},
					isShow: false, //控制查询条件显隐
					changeTaskNo: "",
					showChangeFlag: false,
					showImageFlag: false,
					showImageApplnum: '',
					// 查询条件
					rules: {
						accepted: [{
							pattern: /^[0-9]*$/, //正则
							message: '受理号只能输入数字'
						}],
						chdrnum: [{
							pattern: /^[0-9]*$/, //正则
							message: '保单号只能输入数字'
						}],
						channel: [],
						taskRank: [],
						markNo: [],
						institution: [],
						acceptdate: [],
						order: []
					},
					searchParams: {
						"accepted": "",
						"appntName": "",
						"channelCode": "",
						"flow": "",
						"appntName": "",
						"pageNum": 0,
						"pageSize": 0,
						"peOrgCode": "",
						"policy": "",
						"policyType": "",
						"taskLevel": "",
						"taskStatus": "",
						"insuredName": "",
					},
					//表格数据
					tableData: [],
					//需要给分页组件传的信息
					paginations: {
						total: 5, // 总数
						pageIndex: 1, // 当前位于哪页
						pageSize: 10, // 1页显示多少条
						pageSizes: [5, 10, 15, 20], //每页显示多少条
						layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
					},
					// companyOptions: [],
					policyTypeOptions: [],
					// channelCodeOptions: [], 
					taskLevels: constant.taskLevels,
					taskStatusOptions: constant.taskStatus,
					ssyMap: [],
				}
		},
		created() {
			// getSsyOrgMap().then(data => this.companyOptions = data);
			getCodeDictProject('policyType').then( res => {
				this.policyTypeOptions = res.data;
			});
			getSsyOrgMap().then(data => this.ssyMap = data);
			this.queryData();
		},
		filters: {
			formatSsyMap(val, obj) {
				if(!val) return '';
				return obj[val].sorgname || '';
			}
		},
		methods: {
			queryData(){
				// 组装数据
				this.show();
				let params = constant.deepClone(this.searchParams);
				params.pageNum = this.paginations.pageIndex;
				params.pageSize = this.paginations.pageSize;
				this.tableDataEdit = {};
				selectAiTask(params).then(res => {
					this.cancle();
					this.tableData = res.data.list;
					// 页码赋值
					this.paginations.pageIndex = res.data.pageNum;
					this.paginations.pageSize = res.data.pageSize;
					this.paginations.total = res.data.total;
				})
				.catch(err => {
					this.tableData = [];
					this.cancle();
				})
			},
			show() {
				this.$store.dispatch('loading/CHANGE_LOADING', true);
			},
			cancle() {
				this.$store.dispatch('loading/CHANGE_LOADING', false)
			},
			// 重置条件
			resetSearch() {
				this.$refs['ruleForm'].resetFields();
			},
			// 点击展示查询条件
			showorhide() {
				this.isShow = !this.isShow
			},
			selectSingleTableData(row){
				this.tableDataEdit = row
			},
			// 强制结束
			forceEnd() {
				let arrTaskList = this.$refs.multipleDataTable.selection;
				if (arrTaskList.length === 0) {
					this.$message.error("请选择需要强制结束的任务！");
					return;
				} else if (arrTaskList.length !== 1) {
					this.$message.error("仅可选择一条需要强制结束的任务！");
					return;
				}
				let { id } = arrTaskList[0];
        this.$confirm('确认强制结束此任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.show();
					closeAIProcess({ id }).then( res => {
						if (res.resultCode == constant.SUCCESS) {
							this.$message.success('任务已结束');
						}
						this.cancle();
						this.paginations.pageIndex = 1;
						this.paginations.pageSize = 10;
						this.queryData();
					}).catch(error => {
						this.cancle();
					});
        }).catch(() => {});
			},
			// 每页多少条切换
			handleSizeChange(pageSize) {
				this.paginations.pageSize = pageSize;
				this.queryData();
			},
			// 上下分页
			handleCurrentChange(page) {
				this.paginations.pageIndex = page;
				this.queryData();
			},
			// 点击打开任务流转   
			showChange(taskNo) {
				this.changeTaskNo = taskNo;
				this.showChangeFlag = true;
			},
			hideChange() {
				this.changeTaskNo = '';
				this.showChangeFlag = false;
			},
			showImageList(applnum) {
				this.showImageApplnum = applnum;
				this.showImageFlag = true;
			},
			hideImageList() {
				this.showImageApplnum = '';
				this.showImageFlag = false;
			},
			queryImage(params) {
				selectTaskImage(params).then (res => {
					this.$refs.cdfsImage.handleResponse(res);
				})
				.catch(err => {
					this.$store.dispatch('loading/CHANGE_LOADING', false);
				})
			}
		}
	}
</script>

<style lang="less" scoped >
.fillcontain {
	padding-bottom: 0;
	.fastQuery {
		padding: 15px 20px 10px 20px;
		background: #fff;
		border-bottom: 1px solid #e1e1e1;
		.fastQuery_title {
			color: #666;
			padding: 6px 0px;
		}
		.fastQuery_item {
			margin: 0 10px;
		}
		.item_default {
			.el-button {
				color: #409EFF !important;
				border-color: #c6e2ff !important;
				background-color: #ecf5ff !important;
			}

		}
		.moreCondition {
			color: #68a3fc;
			cursor: pointer;
			padding: 6px 0px;

			.el-icon-d-arrow-right {
				transform: rotate(90deg);
			}

			.el-icon-d-arrow-left {
				transform: rotate(-90deg);
			}
		}
	}
}
.el-icon-d-arrow-right {
    transform: rotate(90deg);
}
.el-icon-d-arrow-left {
    transform: rotate(-90deg);
}

.search_container {
    padding: 20px 20px 0 20px;
}

.result-contain {
	background: #fff;
	padding: 10px;
	margin-bottom: 20px;
}

.operationIcon {
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;
}

.pagination {
    padding: 10px 20px;
    text-align: right;
}
</style> 